<template>
    <div class="clickLike">

        <van-icon name="like-o"
                  size="16"
                  @click="likeClick"
                  :color="num?'#F1050A':''" />
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter">
            <span class="addOne"
                  v-if="isLike">+1</span>
        </transition>
        {{num}}
    </div>
</template>

<script>
    export default {
        name: "Love",
        data() {
            return {
                num: '',//点赞数
                isLike: false,
            }
        },
        methods: {
            beforeEnter(el) {
                //动画开始进入前
                el.style.transform = 'translate(0,0)'
            },
            enter(el, done) {
                //动画执行时
                el.offsetWidth
                el.style.transform = 'translate(10px,-22px)'
                el.style.transition = 'all 0.6s ease'
                done()
            },
            afterEnter(el) {
                //动画结束时
                this.isLike = !this.isLike
                console.log(this.isLike)
            },
            likeClick() {
                this.isLike = true
                this.num++
            },
        }

    }
</script>

<style scoped>

    .clickLike {
        padding: 10px 0;
        position: relative;
    }
    .addOne {
        position: absolute;
        font-size: 18px;
        font-weight: bold;
        color: #F1050A;
    }


</style>